<!doctype html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width initial-scale=1'>
    <title>预览office文档</title>
    <link rel="stylesheet" href="https://a-cai.gitee.io/docsthemes/html-style/yige.css">
    <script src="https://a-cai.gitee.io/docsthemes/highlightjs/highlight.min.js"></script>
    <link rel="stylesheet" href="https://a-cai.gitee.io/docsthemes/highlight-style/atom-one-dark.css">
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <script src="https://a-cai.gitee.io/docsthemes/autoSpacing/pangu.min.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
        document.addEventListener('DOMContentLoaded', () => {
            pangu.autoSpacingPage();
        });
    </script>
</head>

<body>
    <h1>前端实现在线预览pdf、word、xls、ppt等文件</h1>
    <p>最近做了一个项目，需要实现各种文档的在线预览功能。记得以前只能在线预览PDF，然后上网查了一下，发现微软开发了一个在线预览的，可以实现在线预览word、xls、ppt。</p>
    <p>通过：</p>
    <pre><code class='language-html' lang='html'>&lt;a target=&#39;_black&#39; href=&#39;http://view.officeapps.live.com/op/view.aspx?src=$url&#39;&gt;
</code></pre>
    <p>具体文档看这<a
            href='https://link.jianshu.com/?t=https%3A%2F%2Fblogs.office.com%2Fen-us%2F2013%2F04%2F10%2Foffice-web-viewer-view-office-documents-in-a-browser%2F%3Feu%3Dtrue'>微软接口文档</a>。
    </p>
    <p>然后是pdf的在线预览，感觉特别容易，因为以前就是直接通过a链接查看。代码如下</p>
    <pre><code class='language-html' lang='html'>&lt;a href=&quot;文档地址&quot; target=&quot;_blank&quot;&gt;在线预览&lt;/a&gt;
</code></pre>
    <p>结果居然不行，一盆凉水浇了下来，最后看了看发现不是a链接的问题，是因为我用的框架，所有的a链接都是通过PJAX进行了处理，所以实现不了PDF的在线预览。最后想了个办法，通过js处理，如下：</p>
    <pre><code class='language-html' lang='html'>&lt;a href=&quot;#&quot; οnclick=&quot;javascript:window.open(&#39;文档地址&#39;);&quot;&gt; 在线预览 &lt;/a&gt;
</code></pre>
    <p>完美解决问题，最后还百度了一些PDF其他的实现在线预览的办法，查看：</p>
    <p><a href='https://www.jianshu.com/p/2f39de746900' target='_blank'
            class='url'>https://www.jianshu.com/p/2f39de746900</a></p>
</body>

</html>